<template>
  <div class="flex flex-col items-center">
    <div
      class="flex items-center w-full justify-around mb-[5px]"
      v-for="(item, index) in states"
      :key="index"
    >
      <el-input clearable class="!w-[240px]" v-model="states[index]" />
      <el-button type="warning" size="small" @click="states.splice(index, 1)"
        >-</el-button
      >
    </div>

    <el-button @click="add" class="mt-[5px]">增加</el-button>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
let props = defineProps({
  list: Array,
  deault: () => [],
});

let emit = defineEmits(["update:list"]);

let states = computed({
  get() {
    return props.list;
  },
  set(value) {
    emit("update:list", value);
  },
}) as any;

const add = () => {
  states.value.push("");
};
</script>

<style scoped lang="scss"></style>
